<template>
  <div id="enterprise">
    <!-- 这是头部 -->
    <div class="head">
      <div>
        <p class="p1">1.账号信息&nbsp;&nbsp;</p>
        <p class="p1">&nbsp;&nbsp;————&nbsp;&nbsp;2.企业信息&nbsp;&nbsp;</p>
        <p>————&nbsp;&nbsp;3.收款信息</p>
      </div>
    </div>

    <!-- input里面的内容 -->
    <!-- 这是企业名称 -->
    <div class="content">
      <el-form :model="enterprise" :rules="add" ref="enterprise">
        <el-form-item label="企业名称" prop="name">
          <el-input v-model="enterprise.name" />
        </el-form-item>
      </el-form>
      <!-- 这是注册地址 -->
      <el-form :model="enterprise" :rules="add" ref="enterprise">
        <el-form-item label="注册地址" prop="name">
          <el-select v-model="options.value" placeholder="请选择市区">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 详细地址 -->
      <el-form :model="enterprise" :rules="add" ref="enterprise">
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="enterprise.address" />
        </el-form-item>
      </el-form>
      <!-- 企业简介 -->
      <el-form :model="enterprise" :rules="add" ref="enterprise">
        <el-form-item label="企业简介" prop="Introduction">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="enterprise.Introduction"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <!-- 客服电话 -->

      <el-form :model="enterprise" :rules="add" ref="enterprise">
        <el-form-item label="客服电话" prop="service">
          <el-input v-model="enterprise.service" />
        </el-form-item>
      </el-form>
      <!-- 上传营业执照 -->
      <el-form :model="enterprise" :rules="add" ref="enterprise">
        <el-form-item label="营业执照" prop="Introduction">
          <el-upload
            class="avatar-uploader"
            action=''
            :http-request="handleChange"
            :show-file-list="false"
          >
            <img
              v-if="enterprise.imageUrl"
              :src="enterprise.imageUrl"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <!-- 上传门口照片 -->
      <el-form :model="enterprise" :rules="add" ref="enterprise">
        <el-form-item label="门头照片" prop="Introduction">
          <el-upload
            class="avatar-uploader"
            action=''
            :http-request="first"
            :show-file-list="false"
          >
            <img
              v-if="enterprise.imageUrl1"
              :src="enterprise.imageUrl1"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <!-- 负责人姓名 -->
      <el-form :model="enterprise" :rules="add" ref="enterprise">
        <el-form-item label="负责人姓名" prop="charge">
          <el-input v-model="enterprise.charge" />
        </el-form-item>
      </el-form>

      <!-- 负责人电话 -->
      <el-form :model="enterprise" :rules="add" ref="enterprise">
        <el-form-item label="负责人电话" prop="tel">
          <el-input v-model="enterprise.tel" />
        </el-form-item>
      </el-form>

      <el-button type="info" plain @click="confirm">下一步</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "enterprise",
  data() {
    // 验证企业名称是否是汉字
    let judge = (rule, value, cb) => {
      // 验证企业名称
      const regEmail =
        /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/;
      if (!regEmail.test(value)) {
        return cb();
      }
      cb(new Error("请输入正确的企业名称"));
    };

    // 验证客服的电话号码
    let customer = (rule, value, ab) => {
      const num =
        /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
      if (num.test(value)) {
        return ab();
      }
      ab(new Error("请输入正确的电话号码"));
    };

    // 验证电话号码
    let Tel = (rule, value, fb) => {
      const num =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (num.test(value)) {
        return fb();
      }
      fb(new Error("请输入正确的电话号码"));
    };

    return {
      enterprise: {
        name: "国信安", //企业名称
        address: "芸桦路333", //详细地址
        Introduction: "好", //企业简介
        service: "15507621888", //客服电话
        imageUrl: "", // 营业执照图片的地址
        imageUrl1: "", //门头照片的图片地址
        charge: "小红", //负责任人
        tel: "15507621888", //电话
      },
      imgFile: "",
      imgFile1: "",
      Pictureaddress :"", // 后端返回的地址
      Pictureaddress1:"", //后端返回的地址
      Companyaddress :"", //注册地址和详细地址
      options: [
        {
          value: "成都市",
          label: "成都市",
        },
        {
          value: "绵阳市",
          label: "绵阳市",
        },
        {
          value: "达州市",
          label: "达州市",
        },
        {
          value: "南充市",
          label: "南充市",
        },
        {
          value: "泸州市",
          label: "泸州市",
        },
      ],
      value: "",
      add: {
        name: [
          {
            required: true,
            message: "请输入企业名称",
            trigger: "blur",
          },
          {
            validator: judge,
            message: "请输入正确的企业名称",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入您公司的详细地址",
            trigger: "blur",
          },
        ],
        Introduction: [
          {
            required: true,
            message: "请输入您公司的简介详情",
            trigger: "blur",
          },
        ],
        service: [
          {
            required: true,
            message: "请输入电话号码",
            trigger: "blur",
          },
          {
            validator: customer,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],
        charge: [
          {
            required: true,
            message: "请输入您公司的负责人姓名",
            trigger: "blur",
          },
        ],
        tel: [
          {
            required: true,
            message: "请输入电话号码",
            trigger: "blur",
          },
          {
            validator: Tel,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 营业执照的上传
    handleChange(file) {
      //要去判断文件的类型 以及 文件的大小
      //取文件后缀名
      if(file.file.type==="image/jpeg" || file.file.type==="image/jpg"|| file.file.type==="image/png"){
        if (file.size / 1024 / 1024 > 2) {
        return this.$message.error("文件大小不得超过2M");
      }
        
      }else{
        return this.$message.error(
          "上传头像图片只能是 JPG或者png或者jpeg 格式!"
        );
      }
      this.imgFile = file.file;
      let formData = new FormData();
      formData.append("file", this.imgFile);
      this.$axios({
        url: "http://172.16.113.187:8080/userSettle/upload",
        method: "post",
        data: formData,
      })
        .then((res) => {
          if (res.code === 200) {
            this.Pictureaddress = res.data
            this.enterprise.imageUrl = 'http://172.16.113.187:8080//' + res.data
          }
        })
        .catch((err) => {
          console.log("注册失败", err);
        });
    },

    // 门头照片
    first(file) {
      //要去判断文件的类型 以及 文件的大小
      //取文件后缀名
      if(file.file.type==="image/jpeg" || file.file.type==="image/jpg"|| file.file.type==="image/png"){
        if (file.size / 1024 / 1024 > 2) {
        return this.$message.error("文件大小不得超过2M");
      }
        
      }else{
        return this.$message.error(
          "上传头像图片只能是 JPG或者png或者jpeg 格式!"
        );
      }
      this.imgFile = file.file;
      let formData = new FormData();
      formData.append("file", this.imgFile);
      this.$axios({
        url: "http://172.16.113.187:8080/userSettle/upload",
        method: "post",
        data: formData,
      })
        .then((res) => {
          if (res.code === 200) {
            this.Pictureaddress1 = res.data
            this.enterprise.imageUrl1 = 'http://172.16.113.187:8080//' + res.data
          }
        })
        .catch((err) => {
          console.log("注册失败", err);
        });
    },

    // 点击下一步的
    confirm() {
      if (
        this.enterprise.name === "" ||
        this.enterprise.address === "" ||
        this.enterprise.charge === "" ||
        this.enterprise.service === "" ||
        this.enterprise.tel === "" ||
        this.options.value === undefined ||
        this.enterprise.imageUrl === "" ||
        this.enterprise.imageUrl1 === ""
      ) {
        //非空判断
        this.$message({
          message: '请输入完整的信息后再点击提交',
          type: 'warning'
        });
      } else {
        // this.$router.push('/home/merchants/collection')
        this.$router.push({
          path:'/home/merchants/collection',
          query:{
            name : this.enterprise.name,//企业名称
            address:this.enterprise.address,//详细地址
            value:this.options.value,//城市地址
            Introduction:this.enterprise.Introduction,//企业简介
            service:this.enterprise.service,//客户电话，
            charge:this.enterprise.charge,//负责人姓名
            tel:this.enterprise.tel,//负责人电话
            Pictureaddress:this.Pictureaddress,//后端返回的地址
            Pictureaddress1:this.Pictureaddress1,//后端返回的地址
          }
        })
      }
    },
  },
};
</script>

<style scoped lang="less">
html,
body,
#app {
  width: 100%;
  height: 70%;
}

.head {
  margin-top: 50px;
  height: 30px;
  text-align: center;
  div:nth-of-type(1) {
    width: 34%;
    height: 30px;
    margin: auto;
  }
  p {
    float: left;
    line-height: 30px;
  }
  .el-form-item__label {
    width: 300px;
  }
}
.content {
  margin: auto;
  margin-top: 100px;
  width: 40%;
  height: 50%;
  // border: 1px solid red;
  text-align: center;
}
.el-input:nth-of-type(1) {
  margin-left: 20px;
}
.el-input {
  width: 300px;
  // float: right;
}
.el-form {
  margin-bottom: 20px;
}
/deep/.el-form-item__error {
  left: 155px;
}
.el-select {
  margin-left: -53px;
}
.el-textarea {
  left: 10px;
  width: 300px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-icon-plus {
  border: 1px solid #333;
  margin-left: -175px;
  width: 100px;
  height: 100px;
}
.avatar-uploader-icon[data-v-0be000a0] {
  line-height: 100px;
}
.avatar[data-v-0be000a0] {
  margin-left: -140px;
  width: 100px;
  height: 100px;
}
.p1{
  color: #c280ff;
}
</style>